/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */
'use strict';

import React, { Component } from 'react';
import {
    StyleSheet,
    View,
    Image,
    BackAndroid,
    Platform
} from 'react-native';
import TabNavigator from 'react-native-tab-navigator';

import Index from './Index'
import MyIncome from './MyIncome';
import Personal from './Personal';

export let FLAG_TAB = {
    index_tab : 'index_tab' , mine_tab : 'mine_tab' , my_income_tab: 'my_income_tab'
};
export default class HomePage extends Component {

  constructor(props) {
    super(props);
    let selectedTab = this.props.selectedTab ? this.props.selectedTab : FLAG_TAB.index_tab;
    this.state = {
      selectedTab: selectedTab
    }
  }
    componentWillMount() {
        if (Platform.OS === 'android') {
            BackAndroid.addEventListener('hardwareBackPress', this.onBackAndroid);
        }
    }


  render() {
    return (
      <View style={styles.container}>
        <TabNavigator>
          <TabNavigator.Item
            selected={this.state.selectedTab === FLAG_TAB.index_tab}
            title='首页'
            selectedTitleStyle={{color: 'rgb(193,62,28)'}}
            renderIcon={() => <Image style={styles.tabIcon} source={require("../images/icon-index@3x.png")} />}
            renderSelectedIcon={() => <Image style={styles.tabIcon} source={require("../images/icon-index-selected.png")} />}
            onPress={() => this.setState({ selectedTab: FLAG_TAB.index_tab })}>
            <Index navigator={this.props.navigator}/>
          </TabNavigator.Item>
          <TabNavigator.Item
            selected={this.state.selectedTab === FLAG_TAB.mine_tab}
            title='个人中心'
            selectedTitleStyle={{color: 'rgb(193,62,28)'}}
            renderIcon={() => <Image style={styles.tabIcon} source={require("../images/icon-mine.png")} />}
            renderSelectedIcon={() => <Image style={styles.tabIcon} source={require("../images/icon-mine-selected.png")} />}
            onPress={() => this.setState({ selectedTab: FLAG_TAB.mine_tab })}>
            <Personal navigator={this.props.navigator} />
          </TabNavigator.Item>
          <TabNavigator.Item
            selected={this.state.selectedTab === FLAG_TAB.my_income_tab}
            title='个人中心'
            selectedTitleStyle={{color: 'rgb(193,62,28)'}}
            renderIcon={() => <Image style={styles.tabIcon} source={require("../images/icon-my-income.png")} />}
            renderSelectedIcon={() => <Image style={styles.tabIcon} source={require("../images/icon-my-income-selected.png")} />}
            onPress={() => this.setState({ selectedTab: FLAG_TAB.my_income_tab})}>
            <MyIncome navigator={this.props.navigator}/>
          </TabNavigator.Item>
        </TabNavigator>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5FCFF',
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
  tab:{
    height: 52,
    alignItems:'center',
    backgroundColor:'#f4f5f6',
  },
  tabIcon:{
    width:25,
    height:25,
  },
  badgeView:{
    width:22,
    height:14 ,
    backgroundColor:'#f85959',
    borderWidth:1,
    marginLeft:10,
    marginTop:3,
    borderColor:'#FFF',
    alignItems:'center',
    justifyContent:'center',
    borderRadius:8,
  },
  badgeText:{
    color:'#fff',
    fontSize:8,
  }
});